/**
 * @author Sergey Chikuyonok (sc@design.ru)
 * @copyright Art.Lebedev Studio (http://www.artlebedev.ru)
 * @include "/js-libs/canvas-doc.js"
 */

function drawStar(radius, color, border_width, border_color) {
	if (!drawStar.cv) {
			drawStar.cv = document.createElement('canvas');
		}
		
		if (border_width > radius)
			border_width = radius;
		
		if (border_width > 1)
			radius -= border_width / 2;
			
		
		var width = (radius * 2 + border_width), height = width;
		
		if (border_width == 1) {
			width--;
			height--;
			
		}
	
		drawStar.cv.width = width;
		drawStar.cv.height = height;
		
//		var b2 = (border_width > 1) ? Math.ceil(border_width / 2) * 2 : 0;
		var b2 = (border_width > 1) ? border_width : 0;
		
		/** @type {CanvasRenderingContext2D} */
		var ctx = drawStar.cv.getContext('2d');
		
		ctx.strokeStyle = border_color;
		ctx.lineWidth = border_width;
		ctx.lineJoin = 'miter';
		ctx.lineCap = 'square';
		ctx.fillStyle = (color.charAt(0) != '#') ? '#' + color : color;
		
		
		ctx.clearRect(0, 0, width, height);
		ctx.fillStyle = '#0f0';
		ctx.fillRect(0, 0, width, height);
		
		var deg90 = Math.PI / 2;
		
	//	ctx.translate(-border_width / 4, -border_width / 4);
	
		ctx.beginPath();
		ctx.arc(0, 0, radius, deg90, 0, true);
		ctx.arc(radius * 2 + b2, 0, radius, deg90 * 2, deg90, true);
		ctx.arc(radius * 2 + b2, radius * 2 + b2, radius, -deg90, deg90 * 2, true);
		ctx.arc(0, radius * 2 + b2, radius, 0, -deg90, true);
		ctx.closePath();
		ctx.fill();
		
		if (border_width) {
			ctx.beginPath();
			ctx.arc(0, 0, radius, deg90, 0, true);
			ctx.stroke();
			
			ctx.beginPath();
			ctx.arc(radius + radius + b2, 0, radius, deg90 * 2, deg90, true);
			ctx.stroke();
			
			ctx.beginPath();
			ctx.arc(radius + radius + b2, radius * 2 + b2, radius, -deg90, deg90 * 2, true);
			ctx.stroke();
		
			ctx.beginPath();
			ctx.arc(0, radius * 2 + b2, radius, 0, -deg90, true);
			ctx.stroke();
		}
		
		return drawStar.cv.toDataURL();
}

for (var i = 0; i < 20; i++) {
	var elem = document.createElement('div');
	elem.className = 'elem';
	elem.style.backgroundImage = 'url(' + drawStar(10, '#fff', i, '#00f') + ')';
	document.body.appendChild(elem);
}